<!DOCTYPE html>

<!--suppress ALL -->
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>

  <meta charset="UTF-8">
  <title>试验田布局规划图</title>
  <style>
  body{text-align:center}
    .ui-state-hover{
      border: solid 5px #333333;
      text-align: center;
      background: #ffde7f; color:#FFF;

      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="css/grid.css"/>
  <script src="jquery-1.8.1.js"></script>
  <script src="js/browse.js"></script>
  <script type="text/javascript">
  </script>

  <script src="https://unpkg.com/vue"></script>

</head>
<body>
<div id="parent" style="margin:0 auto;padding-top: 0px;">
  <div id="browse-container"  class="ui-state-hover" dir="rtl">

  </div>
  <div style="clear: both">

  </div>
</div>
  <script>
    var app = new Vue({

      data() {
          return{
              myGrids : new Array()
          }

       },
        created() {
          this.buildPlot();
        },
    methods: {
        buildPlot(){
                container = document.getElementById('browse-container')
                parent = document.getElementById("parent")
                container.style.height = 410+"px"
                container.style.width=1800+"px"
                parent.style.height=410+"px"
                parent.style.width=1800+"px"
            $.each(data, function (infoIndex, json){
                var plotId = json["id"];
                var species_num = json["num"];
                var regular="";
                if(json["expType"]=="加工品比"){regular="[5,3,20,加工品比,#7CFC00]"}
                else if(json["expType"]=="加工鉴定"){regular="[2,1,20,加工鉴定,#0000FF]"}
                else if(json["expType"]=="加工预备比"){regular="[3,2,20,加工预备比,#FFFF00]"}
                else if(json["expType"]=="品系筛选"){regular="[3,2,20,品系筛选,#FA8072]"}
                else if(json["expType"]=="早熟品比"){regular="[5,3,20,早熟品比,#9932CC]"}
                else if(json["expType"]=="早熟鉴定"){regular="[3,1,20,早熟鉴定,#7FFFD4]"}
                else if(json["expType"]=="晚熟鉴定"){regular="[2,1,20,晚熟鉴定,#6B8E23]"}
                else if(json["expType"]=="晚熟预备比"){regular="[3,2,20,晚熟预备比,#F4A460]"}
                else if(json["expType"]=="杂交圃"){regular="[1,1,15,杂交圃,#FFDAB9]"}
                else if(json["expType"]=="株系调查"){regular="[1,1,5,株系调查,#00BFFF]"}
                else {regular=""}
                regular=regular.slice(1,regular.length-1).split(',');
                // var in_row=$("#in_row").val();
                // var in_col=$("#in_col").val();
                var in_row=parseFloat(regular[0]/2);  //行/2 占几行
                var in_col=parseInt(regular[1]);   //重复
                var zhu=parseInt(regular[2])/5;   //株/5 占几格
                var expType = regular[3];
                var color = regular[4];
                console.log(expType);
                var width = 20;
                var height = 20;

                //console.log(in_row,in_col,zhu);
                width=width*zhu*species_num;
                height=height*in_row;
                // console.log(width,height);
                //创建土地区域
                var area=document.createElement('ul');

                area.setAttribute("id",plotId);
                area.setAttribute("name",expType);
                area.setAttribute("color",color);
                area.classList.add('in_p','in','draggable','ui-widget-content');
                area.style.color=color;
                area.style.height=height+'px';
                parent.appendChild(area);

                area.style.marginTop = parseInt(json["moveY"])+'px';
                area.style.marginRight=(2099-parseInt(json["move_x1"]))+'px';
                //var color=getRandomColor();
                for(var i=0;i<in_col;i++){
                    var t=document.createElement('li');
                    var text = document.createTextNode(regular[3]+' '+ regular[0]+'行'+'每行'+regular[2]*species_num+'株'+' '+species_num+'品种');
                    var span = document.createElement('span');
                    span.style.color='#000000';
                    span.style.fontSize=10;
                    span.appendChild(text);
                    t.appendChild(span);
                    t.style.width=width+'px';
                    t.style.height=height+'px';
                    t.style.backgroundColor=color;
                    if(i===0){
                        t.style.marginRight=0;
                    }
                    area.appendChild(t);
                }
                myGrids.push([plotId]);
            })
          }
        }
    })
  </script>
</body>
</html>
